<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        input {
            height: 40px;
            width: 400px;
            padding-left: 20px;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <input type="text" placeholder="请输入你的名字">
    <p>名字: <span></span> </p>


    <script src="./debounce.js"></script>
    <script>
        // 要求:
            // 中文字符  [\u4e00-\u9fa5]
            // 长度 2~4
            // 不能以 "臭"  "丑" 字符开头
            // /^[^臭^丑][\u4e00-\u9fa5]{1,3}$/

        
        // 1. 获取相关的标签
        var inp = document.querySelector("input");
        var txt = document.querySelector("p span");

        // 2. 正则表达式
        var regExp = /^[^臭^丑][\u4e00-\u9fa5]{1,3}$/;

        // 3. 事件绑定
        inp.oninput = debounce(function(){
            // 获取输入的值
            var v1 = this.value;
            // 校验输入的值
            if(regExp.test(v1)){
                txt.innerText = v1;
            }else {
                txt.innerText = "您输入的不是常规名字";
            }

        },300)


        

        


    </script>
</body>
</html>